<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>product-list</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">

</head>
<!-- 头部 -->
<div class="header">
    <!-- 最上方导航栏 -->
    <div class="nav">
        <div class="logo">
            <a class="ETH" href="../index.html">
                <p class="ETH">ETH-Hardware</p>
            </a>
            <!-- <p class="ETH">ETH-Hardware</p> -->
        </div>
        <div class="menu_nav">
            <ul>
                <li>
                    <a href="blog.html">BLOG</a>
                </li>
                <li>
                    <a href="contact.html">CONTACT</a>
                </li>
                <li>
                    <a href="product.html" style="background-color: #169bd5;">PRODUCT</a>
                </li>
                <li>
                    <a href="about.html">ABOUT</a>
                </li>
                <li>
                    <a href="../index.html">HOME</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 展示区域 -->
    <div align="center" class="show">
        <!-- 展示 -->
        <img class="eth1" src="../images/ETH-2.0-Beacon-Chain-Launch.jpg" alt="eth2" >
    </div>
</div>

<div class="main">
    <div class="product-list">
        <hr>
        <div class="left">
            <!-- 左上 -->
            <div class="left_top">
                <div style="clear: both;"></div>
                <img class="show" src="../images/2U 2000W Power.jpg" alt="eth2" >
                <p id="des" style="text-align: center;"></p>
            </div>
            <!-- 左下 -->
            <div>
                <!-- 左下5个元素 -->

                <div class="box">
                    <ul id="product_pic">
                        <a href="../images/1.png" target="_blank">
                            <img src="../images/1.png" alt="">
                            <!-- <div class="left_bottom1"></div> -->
                        </a>
                        <a href="../images/2.png" target="_blank">
                            <img src="../images/2.png" alt="">
                            <!-- <div class="left_bottom2"></div> -->
                        </a><a href="../images/3.png" target="_blank">
                            <img src="../images/3.png" alt="">
                            <!-- <div class="left_bottom3"></div> -->
                        </a><a href="../images/4.png" target="_blank">
                            <img src="../images/4.png" alt="">
                            <!-- <div class="left_bottom4"></div> -->
                        </a><a href="../images/5.png" target="_blank">
                            <img src="../images/5.png" alt="">
                            <!-- <div class="left_bottom5"></div> -->
                        </a>
                    </ul>
                </div>

                <script>
                    //获取所有的a标签 
                    var alA = document.getElementById("product_pic").getElementsByTagName("a");
                    //循环遍历所有a标签
                    for (var i = 0; i < alA.length; i++) {
                        //为a设置点击事件
                        alA[i].onclick = function () {
                            //把a标签中的href 中存储的图片路径给需要展示图片的标签。
                            document.getElementById("image").src = this.href;
                            //把a标签中存储的title中存储的内容给需要展示的标签。
                            document.getElementById("des").innerText = this.title;
                            //阻止a链接的默认跳转。
                            return false;
                        }
                    }
                </script>
            </div>

        </div>
        <!-- 右边 -->
        <div class="right">
            <p class="head">2U 2000W Power</p>
            <hr class="pd">
            <p class="subhead">
                Main Parameter
            </p>
            <p class="body">Main Parameter:1800W</p>
            <p class="body">Main Parameter:1800W</p>
            <p class="body">Main Parameter:1800W</p>
            <p class="body">Main Parameter:1800W</p>
            <p class="body">Main Parameter:1800W</p>
            <hr class="pd">
            <p class="subhead">
                Main Parameter
            </p>
            <div class="body2">Considering the status quo of IP telephony, it discusses the main parameter that
                influences
                IP telephony quality, and
                how to improve theQuality by parameter optimization.
                Considering the status quo of IP telephony, it discusses the main parameter that influences IP telephony
                quality, and
                how to improve theQuality by parameter optimization.Considering the status quo of IP telephony, it
                discusses
                the main parameter that influences IP telephony quality, and
                how to improve theQuality by parameter optimization.Considering the status quo of IP telephony, it
                discusses
                the main parameter that influences IP telephony quality, and
                how to improve theQuality by parameter optimization.Considering the status quo of IP telephony, it
                discusses
                the main parameter that influences IP telephony quality, and
                how to improve theQuality by parameter optimization.</div>
        </div>
    </div>
</div>


<!-- 页脚 -->
<div class="footer">
    <div class="bottomnav">
        <ul>
            <li class="last">
                <a href="blog.html">BLOG</a>
            </li>
            <li>
                <a href="contact.html">CONTACT</a>
            </li>
            <li>
                <a href="product.html" style="color: #169bd5;">PRODUCT</a>
            </li>
            <li>
                <a href="about.html">ABOUT</a>
            </li>
            <li>
                <a href="../index.html">HOME</a>
            </li>
        </ul>
    </div>
    <div class="button">
        <button>BUTTON</button>
    </div>
    <div class="link">
        <ul>
            <li><a href="https://www.linkedin.com" target="blank" title="linkedin">
                    <img src="../images/linkedin.png" alt="linkedin" width="36px">
                </a>
            </li>
            <li>
                <a href="https://www.facebook.com" target="blank" title="facebook">
                    <img src="../images/facebook.png" alt="facebook" width="36px">
                </a>
            </li>
            <li>
                <a href="https://www.youtube.com" target="blank" title="youtube">
                    <img src="../images/youtube.png" alt="youtube" width="36px">
                </a>
            </li>
        </ul>
    </div>
    <div class="copyright">
        <p class="copyright">
            Copyright @2021 All rights reserved | This template is made by Mr White
        </p>
    </div>

    <body>

    </body>

</html>